@* 首页内容 - 显示各种图表和数据概览 *@

<div class="charts-container">
    <!-- 第一行:出入量和生命体征 -->
    <div class="charts-row">
        <!-- 出入量图表 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>📊 出入量</h4>
            </div>
            <div class="chart-content">
                <div class="ventilator-chart">
                    <svg width="100%" height="100%" viewBox="0 0 400 200">
                        <!-- X轴 -->
                        <line x1="50" y1="180" x2="350" y2="180" stroke="#e0e0e0" stroke-width="1"/>
                        <!-- Y轴 -->
                        <line x1="50" y1="180" x2="50" y2="20" stroke="#e0e0e0" stroke-width="1"/>
                        
                        <!-- Y轴刻度 -->
                        <text x="45" y="185" text-anchor="end" font-size="10" fill="#999">-600</text>
                        <text x="45" y="140" text-anchor="end" font-size="10" fill="#999">-300</text>
                        <text x="45" y="95" text-anchor="end" font-size="10" fill="#999">0</text>
                        <text x="45" y="50" text-anchor="end" font-size="10" fill="#999">300</text>
                        <text x="45" y="5" text-anchor="end" font-size="10" fill="#999">600</text>
                        
                        <!-- X轴刻度 -->
                        <text x="85" y="195" text-anchor="middle" font-size="10" fill="#999">0.5</text>
                        <text x="135" y="195" text-anchor="middle" font-size="10" fill="#999">1</text>
                        <text x="185" y="195" text-anchor="middle" font-size="10" fill="#999">1.5</text>
                        <text x="235" y="195" text-anchor="middle" font-size="10" fill="#999">2</text>
                        <text x="285" y="195" text-anchor="middle" font-size="10" fill="#999">2.5</text>
                        <text x="335" y="195" text-anchor="middle" font-size="10" fill="#999">3</text>
                        
                        <!-- 入量柱状图 -->
                        <rect x="70" y="40" width="30" height="55" fill="#4a90e2"/>
                        <rect x="170" y="70" width="30" height="25" fill="#4a90e2"/>
                        <rect x="270" y="40" width="30" height="55" fill="#4a90e2"/>
                        
                        <!-- 出量柱状图 -->
                        <rect x="120" y="95" width="30" height="80" fill="#ff6b6b"/>
                        <rect x="220" y="110" width="30" height="65" fill="#ff6b6b"/>
                        <rect x="320" y="135" width="30" height="40" fill="#ff6b6b"/>
                        
                        <!-- 合计线 -->
                        <path d="M 85,115 L 120,135 L 170,90 L 220,140 L 270,115 L 320,150" fill="none" stroke="#8bc34a" stroke-width="3"/>
                        
                        <!-- 合计区域填充 -->
                        <path d="M 85,115 L 120,135 L 170,90 L 220,140 L 270,115 L 320,150 L 320,180 L 85,180 Z" fill="#e8f5e9" opacity="0.5"/>
                        
                        <!-- 数据标签 -->
                        <text x="85" y="35" text-anchor="middle" font-size="12" fill="#333">750</text>
                        <text x="120" y="90" text-anchor="middle" font-size="12" fill="#333">85</text>
                        <text x="170" y="65" text-anchor="middle" font-size="12" fill="#333">85</text>
                        <text x="220" y="105" text-anchor="middle" font-size="12" fill="#333">500</text>
                        <text x="270" y="35" text-anchor="middle" font-size="12" fill="#333">750</text>
                        <text x="320" y="130" text-anchor="middle" font-size="12" fill="#333">300</text>
                        
                        <!-- 合计线数据点 -->
                        <circle cx="85" cy="115" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                        <circle cx="120" cy="135" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                        <circle cx="170" cy="90" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                        <circle cx="220" cy="140" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                        <circle cx="270" cy="115" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                        <circle cx="320" cy="150" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                        
                        <!-- 图例 -->
                        <rect x="300" y="15" width="15" height="10" fill="#4a90e2"/>
                        <text x="320" y="23" font-size="10" fill="#333">入量</text>
                        <rect x="300" y="30" width="15" height="10" fill="#ff6b6b"/>
                        <text x="320" y="38" font-size="10" fill="#333">出量</text>
                        <line x1="300" y1="50" x2="315" y2="50" stroke="#8bc34a" stroke-width="3"/>
                        <text x="320" y="53" font-size="10" fill="#333">合计</text>
                    </svg>
                </div>
            </div>
        </div>
        
        <!-- 生命体征图表 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>❤️ 生命体征</h4>
            </div>
            <div class="chart-content">
                <div style="padding: 20px; text-align: center; color: #7f8c8d;">
                    <p>生命体征数据图表</p>
                    <p style="font-size: 12px;">心率、血压、呼吸等监护数据</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 第二行:呼吸机 -->
    <div class="charts-row">
        <div class="chart-card">
            <div class="chart-header">
                <h4>🫁 呼吸机</h4>
            </div>
            <div class="chart-content">
                <div style="padding: 20px; text-align: center; color: #7f8c8d;">
                    <p>呼吸机参数监测</p>
                    <p style="font-size: 12px;">PEEP、潮气量、呼吸频率等</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 第三行:医嘱用药和检验指标 -->
    <div class="charts-row">
        <!-- 医嘱用药表格 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>💊 医嘱用药</h4>
            </div>
            <div class="chart-content">
                <div class="medication-table">
                    <div class="table-row">
                        <div class="table-cell">11-04 16:35 (临)</div>
                        <div class="table-cell">瑞芬太尼 10ml</div>
                        <div class="table-cell">很多备注</div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell">11-04 16:35 (长)</div>
                        <div class="table-cell">芬太尼 15ml</div>
                        <div class="table-cell">很多备注</div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell">11-04 16:35 (临)</div>
                        <div class="table-cell">瑞芬太尼 10ml</div>
                        <div class="table-cell">很多备注</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 检验指标表格 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>🔬 检验指标</h4>
            </div>
            <div class="chart-content">
                <div class="lab-test-table">
                    <div class="table-row">
                        <div class="table-cell" style="color: blue;">红细胞</div>
                        <div class="table-cell">11-04 16:35</div>
                        <div class="table-cell">10 ml</div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell">总蛋白</div>
                        <div class="table-cell">11-04 16:35</div>
                        <div class="table-cell">15 ml</div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell" style="color: blue;">红细胞</div>
                        <div class="table-cell">11-04 16:35</div>
                        <div class="table-cell">10 ml</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 第四行:血气分析和检查报告 -->
    <div class="charts-row">
        <!-- 血气分析表格 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>🩸 血气分析</h4>
            </div>
            <div class="chart-content">
                <div class="medication-table">
                    <div class="table-row">
                        <div class="table-cell">氧合指数</div>
                        <div class="table-cell">11-04 17:34</div>
                        <div class="table-cell">108 mmHg</div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell">PaCO2</div>
                        <div class="table-cell">11-04 17:34</div>
                        <div class="table-cell">205 mmHg</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 检查报告表格 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>📋 检查报告</h4>
            </div>
            <div class="chart-content">
                <div class="lab-test-table">
                    <div class="table-row">
                        <div class="table-cell">超声检查</div>
                        <div class="table-cell">11-04 17:34</div>
                        <div class="table-cell">正常</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 第五行:CRRT和导管 -->
    <div class="charts-row">
        <!-- CRRT表格 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>🔄 CRRT</h4>
            </div>
            <div class="chart-content">
                <div class="medication-table">
                    <div class="table-row">
                        <div class="table-cell"><strong>时间</strong></div>
                        <div class="table-cell"><strong>体征</strong></div>
                        <div class="table-cell"><strong>尿量</strong></div>
                        <div class="table-cell"><strong>超滤</strong></div>
                        <div class="table-cell"><strong>检测记录</strong></div>
                        <div class="table-cell"><strong>签名</strong></div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell">2025/11/4</div>
                        <div class="table-cell">HR:106 BP...</div>
                        <div class="table-cell">12</div>
                        <div class="table-cell">300</div>
                        <div class="table-cell">治疗中</div>
                        <div class="table-cell">护士A</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 导管表格 -->
        <div class="chart-card">
            <div class="chart-header">
                <h4>🔌 导管</h4>
            </div>
            <div class="chart-content">
                <div class="lab-test-table">
                    <div class="table-row">
                        <div class="table-cell"><strong>导管名称</strong></div>
                        <div class="table-cell"><strong>状态</strong></div>
                        <div class="table-cell"><strong>置管时间</strong></div>
                        <div class="table-cell"><strong>天数</strong></div>
                        <div class="table-cell"><strong>皮肤</strong></div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell">导尿管</div>
                        <div class="table-cell">插管中</div>
                        <div class="table-cell">2025/11/4</div>
                        <div class="table-cell">12</div>
                        <div class="table-cell">正常</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

